<template>
  <div class="content1">
    <div class="data-list">
      <div>
        <span>数据看板</span>
        <div class="study-state">
          今日未学习
          <img src="../../assets/img/home/study-state.png" alt="" />
        </div>
      </div>
      <div>
        <div class="study-num">
          <div>
            <span>138</span>
            <p>练习题数</p>
          </div>
          <div>
            <span>138</span>
            <p>练习题数</p>
          </div>
          <div>
            <span>138</span>
            <p>练习题数</p>
          </div>
        </div>
        <div class="study-day">
          <div class="day-item"></div>
          <div class="day-item"></div>
          <div class="day-item"></div>
          <div class="day-item"></div>
          <div class="day-item"></div>
          <div class="day-item"></div>
          <div class="day-item"></div>
        </div>
      </div>
    </div>
    <div class="infor-list">
      <div class="head">
        <span>通知公告</span>

        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button"
            id="dropdownMenuButton" data-toggle="dropdown"
            aria-expanded="false">
            全部
          </button>
          <div style="width: 76px" class="dropdown-menu"
            aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">全部</a>
            <a class="dropdown-item" href="#">已读</a>
            <a class="dropdown-item" href="#">未读</a>
          </div>
        </div>
      </div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.content1 {
  color: white;
  .data-list {
    width: 920px;
    height: 170px;
    background-color: #0099ff;
    margin-bottom: 50px;
    padding: 20px 40px;
    > div {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;
      span {
        font-size: 21px;
      }
      .study-state {
        height: 50px;
        width: 300px;
        background-color: #0066cc;
        padding: 13px 30px;
        display: flex;
        justify-content: space-between;
      }
      .study-num {
        display: flex;
        > div {
          margin-right: 80px;
          font-size: 13px;
          span {
            font-size: 20px;
          }
        }
      }
      .study-day {
        display: flex;
        .day-item {
          margin-left: 5px;
          width: 38px;
          height: 38px;
          border-radius: 19px;
          background-color: #ffeb3b;
        }
      }
    }
  }
  .infor-list {
    width: 920px;
    color: black;
    > div {
      padding: 15px 20px;
      height: 50px;
      background-color: #f2f2f2;
      margin-bottom: 10px;
    }
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        font-size: 16px;
      }
      .dropdown {
        margin-right: 20px;
        .btn-secondary {
          width: 158px;
          background-color: #009933;
        }
        .dropdown-item {
          text-align: center;
        }
      }
    }
  }
}
</style>
